<template>
    <div class="cartcontrol">
        <transition name="move">
        <div class="cart-decrease " v-show="food.count>0" @click.stop.prevent="decreaseCart">
                                                                <!-- 阻止事件冒泡 -->
            <span class="inner icon-remove_circle_outline"></span>
        </div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
    </div>
</template>

<script>
import Vue from 'vue';

export default {
   props:{
       food:{   //从父级传入对象
           type:Object
       }
   },
   created(){
   },
   methods:{
       addCart(event){
           if(!event._constructed){   //阻止sc的事件
                return;
            }
           if(!this.food.count){
               Vue.set(this.food,'count',1); //新增count属性
           }else{
               this.food.count++;
           }
           this.$emit('cart-add', event.target); //添加这句，提交'cart-add'事情给父组件，第二个是要传递的参数
       },
       decreaseCart(event){
           if(!event._constructed){
                return;
            }
            if(this.food.count){
                this.food.count--;
            }
       }
   },
}
</script>

<style lang="stylus">
    .cartcontrol
      font-size 0
      .cart-decrease,.cart-add
        display inline-block
        padding 6px
        transition all 0.4s linear
        &.move-transition
          opacity 1
          transform translate3d(0,0,0)
        .inner
          display inline-block
          line-height 24px
          font-size 24px
          color rgb(0,160,220)
          transition all 0.4s linear
          transform rotate(0)
        &.move-enter,&.move-leave-active
          opacity 0
          transform translate3d(24px,0,0)
          .inner
            transform rotate(180deg)  
      .cart-count
        display inline-block
        vertical-align top
        width 12px
        padding-top 6px
        line-height 24px
        text-align center
        font-size 10px
        color rgb(147,153,159)
      .cart-add
        display inline-block
        padding 6px
        line-height 24px
        font-size 24px
        color rgb(0,160,220)
        
</style>


